<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    <style>
        /* 淡入淡出组 */
        .fade-enter, .fade-leave-to {
          opacity: 0;
        }
        .fade-enter-active, .fade-leave-active {
          transition: opacity 0.5s;
        }
        
        /* 上下滑动组 */
        .slide-enter, .slide-leave-to {
          transform: translateY(1000px);
          opacity: 0;
        }
        .slide-enter-active, .slide-leave-active {
          transition: all 0.5s;
        }
    </style>
    </head>
    <body>
        <div id="app">
          <button @click="toggleFade">切换淡入淡出</button>
          <button @click="toggleSlide">切换上下滑动</button>
          
          <transition name="fade">
            <p v-if="showFade">这是淡入淡出的段落。</p>
          </transition>
        
          <transition name="slide">
            <p v-if="showSlide">这是上下滑动出现和消失的段落。</p>
          </transition>
        
        </div>
        
        <script src="../../../js/vue.js"></script>
        
        <script>
        new Vue({
          el: '#app',
          data() {
            return {
              showFade: false,
              showSlide: false
            }
          },
          methods: {
            toggleFade() {
              this.showFade = !this.showFade;
            },
            toggleSlide() {
              this.showSlide = !this.showSlide;
            }
          }
        });
        </script>

    </body>
</html>